<link rel="stylesheet" href="__CDN__/assets/addons/health/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/health/libs/common.css">
<style>
    #pageDetail {
        background: #fff;
        overflow: auto;
        color: #666;
    }

    .msg-tip {
        margin-left: 30px;
        color: #999;
    }

    .select-goods {
        width: 146px;
        height: 50px;
        border: 1px solid #E6E6E6;
        border-radius: 4px;
        position: relative;
        margin-top: 10px;
    }

    .select-goods-selected {
        border-color: #7438D5;
    }

    .select-goods-img {
        width: 48px;
        height: 48px;
        border-radius: 4px;
    }

    .select-goods div {
        padding: 0 8px;
        line-height: 14px;
        -webkit-line-clamp: 2;
        font-size: 12px;
    }

    .delete-goods {
        position: absolute;
        width: 16px;
        height: 16px;
        top: -8px;
        right: -8px;

    }

    .label-auto {
        width: 16px;
        height: 16px;
    }

    .modify-text {
        margin-right: 14px;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/health/libs/vue.js"></script>
<script src="__CDN__/assets/addons/health/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/health/libs/moment.js"></script>
<div id="pageDetail" v-cloak>
    <el-form :model="detailData" :rules="rules" ref="detailData" label-width="108px" class="detail-form">
        <el-form-item label="优惠券名称：" prop="name">
            <div class="display-flex" style="width: 170px;">
                <el-input type="input" v-model="detailData.name" placeholder="请输入优惠券名称"></el-input>
            </div>
        </el-form-item>
        <el-form-item label="使用门槛：" prop="condition_money">
            <div class="display-flex">
                <el-input v-enter-number v-model.number="detailData.condition_money" style="width:170px;"
                    placeholder="请输入使用门槛">
                    <template slot="append">元</template>
                </el-input>
            </div>
        </el-form-item>
        <el-form-item label="优惠金额：" prop="money">
            <div class="display-flex">
                <el-input v-enter-number v-model.number="detailData.money" style="width:170px;"
                    placeholder="请输入优惠金额">
                    <template slot="append">元</template>
                </el-input>
            </div>
        </el-form-item>
        <el-form-item label="发放总量：" prop="send_total_type">
            <div class="display-flex">
              <el-radio-group v-model="detailData.send_total_type">
                  <el-radio-button :label="1" border>不限制数量</el-radio-button>
                  <el-radio-button :label="2" border>固定数量</el-radio-button>
              </el-radio-group>
            </div>
        </el-form-item>
        <el-form-item label="" prop="send_total" v-if="detailData.send_total_type===2">
            <div  class="display-flex">
                <el-input v-enter-number v-model.number="detailData.send_total" style="width:160px;" placeholder="请输入发放数量" >
                  <template slot="append">张</template>
                </el-input>
            </div>
        </el-form-item>
        <el-form-item label="用券时间：" prop="use_time_type">
            <div class="display-flex">
              <el-radio-group v-model="detailData.use_time_type">
                <el-radio-button  :label="1" border>固定时间</el-radio-button>
                <el-radio-button  :label="2" border>领券当日起</el-radio-button>
                <el-radio-button  :label="3" border>领券次日起</el-radio-button>
              </el-radio-group>
            </div>
            <div v-if="detailData.use_time_type===1" class="display-flex" style="margin-top: 20px;">
              <el-date-picker style="width:400px;" v-model="detailData.use_time_range" type="datetimerange" range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期"
              end-placeholder="结束日期" @change="changeTime('usetime')">
              </el-date-picker>
            </div>
            <div v-if="detailData.use_time_type===2 ||detailData.use_time_type===3" class="display-flex" style="margin-top: 20px;">
              <el-input v-enter-number v-model.number="detailData.use_time" style="width:240px;" >
                <template slot="append">天内可用</template>
              </el-input>
            </div>
        </el-form-item>
        <el-form-item label="适用商品：" prop="use_goods_type">
          <div>
              <el-radio-group v-model="detailData.use_goods_type">
                  <el-radio-button :label="1">全部商品可用</el-radio-button>
                  <el-radio-button :label="2">指定商品可用</el-radio-button>
              </el-radio-group>
              <div class="display-flex" style="flex-wrap: wrap;" v-if="detailData.use_goods_type=='2'">
                  <div class="select-goods display-flex" :class="item.selected?'select-goods-selected':''"
                      v-for="(item,index) in goods_arr" @click="operation('selectedDel',index)">
                      <img class="select-goods-img" :src="Fast.api.cdnurl(item.picture)">
                      <div class="flex-1 ellipsis-item">
                          {{item.goods_name}}
                      </div>
                      <img v-if="item.selected" class="delete-goods label-auto"
                          src="/assets/addons/health/img/goods/close.png" @click="operation('delete',index)">
                  </div>
              </div>
              <div class="display-flex" v-if="detailData.use_goods_type=='2'">
                  <div class="display-flex">
                      <div class="theme-color cursor-pointer modify-text" @click="operation('selected')">修改已选商品
                      </div>
                      <div class="theme-delete-color cursor-pointer" @click="operation('clear')">清空</div>
                  </div>
              </div>
          </div>
      </el-form-item>
    </el-form>
    <div class="dialog-footer display-flex">
        <div @click="submit" class="dialog-cancel-btn display-flex-c cursor-pointer">取消</div>
        <div @click="submit('yes','detailData')" class="dialog-define-btn display-flex-c cursor-pointer">确定</div>
    </div>
</div>